// @ts-nocheck
// 注释来忽略类型检查
// @ts-ignore
// 来忽略本行的错误
// @ts-check
// 注释来选则检查某些.js文件

import i18n from 'i18next';

import { setTheme } from './theme';

import styles from './index.less';

import { Modal, Button } from 'antd';

import {
  useTranslation,
  Trans,
  withTranslation,
  WithTranslation,
  getI18n,
} from 'react-i18next';

import React, { useState, useEffect, useRef } from 'react';

import test from '../test';

import ForwordRef, { ForwordRefType } from './components/forwordRef';

import TsTest from './tsTest';

import { a } from './testTrans';

class testTran extends React.Component<WithTranslation> {
  constructor(props: WithTranslation) {
    super(props);
    this.state = {
      a: 1,
    };
  }
  render() {
    const { t } = this.props;
    return <div>{t('total.name', { name: '王路飞' })}</div>;
  }
}

const ClassTestTran = withTranslation()(testTran);

const regexp = () => {
  const str = 'my name Is jiang, she is dell';
  const str1 = 'a1b2c3';
  const str2 = 'nambdc';
  const str3 = '1a2c2t3A2M3V1U2';
  const str4 = '1234ab2324';
  const str5 = 'this is a boy';
  const str6 = '@1234@sadasd@';
  const str7 = '1222222333333';
  const str8 = '12345678';
  const str9 = 'a1b2c3d4';
  const str10 = 'aaaabbbb';
  const str11 = '2020-10-10';
  const str12 = 'a2*3';
  const reg = /\bis\b/g;
  const reg1 = /[abc]/g;
  const reg2 = /[^abc]/g;
  const reg3 = /[a-zA-Z]/g;
  const reg4 = /ab\d./g;
  const reg5 = /\Bis\b/g;
  const reg6 = /^.@/g;
  const reg6_1 = /.@$/g;
  const reg7 = /2{3}/g;
  const reg8 = /\d{3,6}?/g;
  const reg9 = /([a-z]\d){3}/g;
  const reg10 = /(aa|bb)/g;
  const reg11 = /(\d{4})-(\d{2})-(\d{2})/g;
  const reg12 = /\w(?=\d)/g;
  const regs = new RegExp('\\bis\\b', 'gi');
  console.log(
    '正则匹配结果：',
    str12.replace(reg12, 'NNN'),
    str.replace(regs, 'IS'),
    regs.source,
    regs.lastIndex,
    regs.global,
    regs.ignoreCase,
    regs.multiline,
    regs.test(str)
  );
};

const App = (): JSX.Element => {
  let foo = 2; // eslint学习
  console.log(foo); // eslint学习
  const { t } = useTranslation();
  console.log(process.env, WEB_MODE);
  let [text, setText] = useState('测试字符串');
  const [testLoader, setTestLoader] = useState('测试loader');
  const forwordRef = useRef<ForwordRefType>();
  const [showModal, setShowModal] = useState(false);

  const decoratorTest = () => {
    function classDecorator(classObj: any) {
      console.log('classDecorator', classObj);
    }

    function functionDecorator(target: User, name: string, descriptor: any) {
      console.log('functionDecorator', target, name, descriptor);
    }

    function filedDecorator(filed: string) {
      return function (target: User, name: string, descriptor: any) {
        console.log('filedDecorator', target, name, descriptor, filed);
      };
    }

    function valueDecorator(target: User, propertyKey: string) {
      console.log('valueDecorator', target, propertyKey);
    }

    function paramsDecorator(
      target: any,
      methodName: string,
      paramsIndex: number
    ) {
      console.log('paramsDecorator', target, methodName, paramsIndex);
    }
    @classDecorator
    class User {
      @valueDecorator
      public name = '234234';
      constructor() {}
      @filedDecorator('234234234')
      @functionDecorator
      getName() {
        return '111';
      }
      static testParams(@paramsDecorator params: string) {
        console.log(params);
      }
    }
    let user = new User();
    console.log(user.getName());
  };

  // 修饰器
  const decorator = () => {
    decoratorTest();
    function log(target: User, name: string, descriptor: any) {
      descriptor.value = function (e: any) {
        console.log('descriptor', e);
        return 1232312;
      }; // 重新赋值属性
      // descriptor.writable = false // 设置不可修改
      return descriptor;
    }
    class User {
      @log
      getName() {
        return '111';
      }
      @log // 改写getNameN属性
      getNameN() {
        return '222';
      }
    }
    let a = new User();
    console.log(a, a.getName());
  };

  useEffect(() => {
    test();
    forwordRef.current?.init();
    forwordRef.current?.end('end');
    regexp();
    decorator();
    const { ipcRenderer } = require('electron');
    console.log('发送消息给electron主进程');
    ipcRenderer.send('testSendMainMessage', { a: 10 });
    ipcRenderer.on('listenMainEvent', async (event: any) => {
      console.log(event, '监听electron主进程事件');
    });
  }, []);

  useEffect(() => {
    console.log(234567890, text);
  }, [text]);
  return (
    <div className={styles.home}>
      <div className={`${styles.lessTest} test`}>lessTest样式模块化</div>
      <h1>h1h1h1h1h1</h1>
      <div className="testScss">测试scss和less共存</div>
      <a href="">test scss</a>
      <button onClick={() => setTheme()}>换肤</button>
      {a.name()}
      {a.name_a()}
      {a.name1()}
      {a.name1_a()}
      <ClassTestTran />
      <button
        onClick={() => {
          console.log('getI18n()', getI18n().language);
          i18n.changeLanguage(getI18n().language === 'zh_cn' ? 'en' : 'zh_cn');
        }}
      >
        改变语言
        {/* 兼容hook和components两种组件 */}
        {t('total.hello')}
        {t('total.name', { name: '王路飞' })}
        <Trans>total.hello</Trans>
        <Trans tOptions={{ name: '王路飞' }}>total.name</Trans>
      </button>
      <TsTest title="123456" age={10} />
      0-1搭建react项目
      <div>
        {testLoader}
        <br />
        <button
          onClick={() => {
            console.log(text); // 可以拿到下面的直接赋值后的值但是不会触发react的更新
            setText('设置后的值');
          }}
        >
          setState改变
        </button>
        {text}
        <button
          onClick={() => {
            text = '500'; // 直接赋值
            console.log(text);
          }}
        >
          直接赋值
        </button>
      </div>
      <ForwordRef ref={forwordRef} />
      <button
        onClick={() => {
          console.log('babel', process.env.NODE_ENV, process.env.BABEL_ENV);
          if (DEBUG) {
            const a = 1;
            const b = 2;
            console.log(a + b, 'babel');
          }
        }}
      >
        配合学习babel
      </button>
      <Button onClick={() => setShowModal(true)}>打开弹窗</Button>
      <Modal
        onCancel={() => setShowModal(false)}
        onOk={() => setShowModal(false)}
        title="测试antd弹窗在qiankun中的使用情况"
        visible={showModal}
      />
    </div>
  );
};

export default App;
